<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/main.css" />
    <style>

    </style>
</head>

<body>
    <div id="app">
        <footer class="footer" style="height:.5rem">
            <div class="footer-item" :class="{active:frameIndex == 0}" @click="setFrameGroupIndex(0)">
                <img :src="frameIndex == 0 ?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/footer/store_on.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/footer/store.png'" alt="">
                <span>店铺首页</span>
            </div>
            <div class="footer-item" :class="{active:frameIndex == 1}" @click="setFrameGroupIndex(1)">
                <img :src="frameIndex == 1 ?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/footer/all_on.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/footer/all.png'" alt="">
                <span>全部宝贝</span>
            </div>
            <div class="footer-item" :class="{active:frameIndex == 2}" @click="setFrameGroupIndex(2)">
                <img :src="frameIndex == 2 ?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/footer/baby_on.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/footer/baby.png'" alt="">
                <span>宝贝分类</span>
            </div>
            <div class="footer-item" :class="{active:frameIndex == 3}" @click="gIMCommon(api.pageParam.id)">
                <img :src="frameIndex == 3 ?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/footer/kf_on.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/footer/kf.png'" alt="">
                <span>客服</span>
            </div>
        </footer>
        <script src="../../script/flexible.js"></script>
        <script src="../../script/api.js"></script>
        <script src="../../script/vue.min.js"></script>
        <script src="../../script/fastclick.js"></script>
        <script src="../../script/restful.js"></script>
        <script src="../../script/common.js"></script>
        <script src="../../script/businessCommon.js"></script>

        <script>
            apiready = function () {
                var vm = new Vue({
                    el: '#app',
                    data: {
                        headerH: 0,
                        footerH: 0,
                        frameIndex: 0,
                        frames: [{
                            name: 'store_home_win',
                            url: 'store_home_win.html',
                        }, {
                            name: 'all_baby_win',
                            url: 'all_baby_win.html',
                        }, {
                            name: 'classify_baby_win',
                            url: 'classify_baby_win.html',
                        }],
                    },
                    created: function () {},
                    mounted: function () {
                         setLightStatusBar();
                        this.footerH = $api.fixTabBar($api.dom(".footer"))
                        this.getStoreInfo()
                    },
                    methods: {
                        getStoreInfo() {
                            var param = {
                                userId: api.pageParam.id
                            }
                            var vm = this;
                            common('getStoreInfo')(param, function (ret) {
                                vm.openFrameGroup(ret.data);
                            })
                        },
                        openFrameGroup(storeInfo) {
                            var vm = this;
                            vm.frames.map((item) => {
                                item.pageParam = {
                                    footerH: vm.footerH,
                                    storeInfo: storeInfo,
                                    queryOwn:api.pageParam.queryOwn
                                }
                            })
                            api.openFrameGroup({
                                name: 'my_store_frame_group',
                                rect: {
                                    marginTop: vm.headerH,
                                    marginBottom: vm.footerH,
                                    w: 'auto'
                                },
                                scrollEnabled: false,
                                frames: vm.frames,
                                preload: 0,
                                pageParam: api.pageParam
                            }, function (ret, err) {
                                vm.frameIndex = ret.index;
                            });
                        },
                        setFrameGroupIndex(frameIndex) {
                            api.setFrameGroupIndex({
                                name: 'my_store_frame_group',
                                index: frameIndex
                            });
                            vm.frameIndex = frameIndex;
                            api.setFrameGroupAttr({
                                name: 'classify_group',
                                hidden: frameIndex != 2
                            });
                            api.setFrameAttr({
                                name: 'all_baby_frm',
                                hidden: frameIndex != 1
                            });
                            api.setFrameAttr({
                                name: 'store_home_frm',
                                hidden: frameIndex != 0
                            });
                        },
                    }
                })
            }
        </script>
    </div>
</body>

</html>
